<template>
    <div>
        <div class="recom-full" v-for="(item,index) in blogList" :key="index">
            <input type="text" ref="idInput" style="display: none;" :value="item.id"/>
            <img :src="item.blogImage" alt="" @click="clickitem(index)">
            <div class="full-text">
                <h3 @click="clickitem(index)">{{item.blogTitle}}</h3>
                <p>{{item.blogRemark}}</p>
                <div class="detail">
                    <ul>
                        <li>
                            <img src="~assets/img/item/denglu.svg" alt="">
                            <p>卖鱼强</p>
                        </li>
                        <li>
                            <img src="~assets/img/item/shijian.svg" alt="">
                            <P>{{item.createTime}}</P>
                        </li>
                        <li>
                            <img src="~assets/img/item/ai-eye.svg" alt="">
                            <P>{{item.blogViews}}</P>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <paging :pageTotal="totalPage" @currentchange="handleCurrentChange" class="page"/>
    </div>
</template>

<script>
import Paging from 'components/common/paging/Paging'
import {request} from 'network/request'
    export default {
        name: 'recomfull',
        data () {
            return {
                path: 'essay'
            }
        },
        components: {
          Paging
        },
        props: {
            /**
             * 博客列表
             */
            blogList: {
                type: Array,
                default() {
                    return []
                }
            },
            /**
             * 获取博客列表的方法
             */
            getBlogList:{
                type: Function
            },
            totalPage:{
                type: Number
            }
        },
        methods: {
            clickitem(index) {
                if (this.$route.path !== this.path) {
                    // this.$router.replace(this.path)
                    this.$router.push({
                        name: this.path,
                        params: {
                            page: '1',
                            code: '8989',
                            id: this.blogList[index].id
                        }
                    })
                }
            },
            handleCurrentChange(cpage) {
              //传上来当前页数，根据页数更改显示
              this.getBlogList(cpage)
            }
        }
    }
</script>

<style scoped>
    .recom-full {
        float: left;
        display: flex;
        padding: 20px;
        width: 100%;
        height: 200px;
        background-color: #f7f7f7;
        border-bottom: 3px solid #f1f1f1;
    }

    .page{
        float: left;
    }

    .recom-full:hover {
        background-color: rgba(201, 255, 214, 0.3);
    }

    .recom-full img {
        width: 300px;
        border-radius: 5px;
        cursor: pointer;
    }

    .full-text {
        width: 100%;
        padding-left: 20px;
        position: relative;

    }

    .full-text h3 {
        width: 90%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
    }

    .full-text h3:hover {
        color: #65c265;
    }

    .full-text p {
        font-size: 16px;
        color: #a1a1a1;
    }

    .detail {
        position: absolute;
        left: 20px;
        bottom: 30px;
    }

    .detail img {
        width: 14px;
        vertical-align: middle;
    }

    .detail p {
        display: inline-block;
        font-size: 13px;
        padding-left: 4px;
    }

    .detail ul li {
        float: left;
        padding-right: 20px;
    }
</style>
